<style>
.info-container {
    line-height: 30px;
}
.base-info {
    background: #f8f8f8;
    padding-left: 10px;
    height: 30px;
    color: #999;
}
.base-info-container {
    padding-left: 10px;
}
.avtar, .base-info-item {
    display: flex;
    padding: 10px 0;
    position: relative;
}
.avar-icon {
    height: 30px;
}
.avar-icon img {
    border-radius: 50%;
    height: 100%;
}
.base-info-tip {
    flex: 1;
    color: #444;
}
.base-info-container {
    color: #666;
}
.base-info-item-val {
    text-align: right;
    width: 80px;
}
.base-info-item-icon {
    width: 30px;
}
.no-arrow-icon {
    padding-right: 20px;
}
</style>
<template>
    <div>
        <app-header>
            <div>个人资料</div>
            <div slot="headerRightBtn" @click="goToHome">
                <span class="icon-home"></span>
            </div>
            <div slot="headerLeftBtn" @click="goPersonCenter">
                <span class="icon-person_center"></span>
            </div>
        </app-header>
        <div class="page info-container scale-1px">
            <div class="base-info scale-1px">
                基本信息
            </div>
            <div class="base-info-container">
                <div class="avtar scale-1px">
                    <div class="base-info-tip">头像</div>
                    <div class="avar-icon no-arrow-icon">
                        <img :src="personInfo.headImg" alt="">
                    </div>
                </div>

                <div class="base-info-item scale-1px">
                    <div class="base-info-tip">昵称</div>
                    <div class="base-info-item-val no-arrow-icon">
                        {{personInfo.nickname}}
                    </div>
                </div>
                <div class="base-info-item scale-1px">
                    <div class="base-info-tip">性别</div>
                    <div class="base-info-item-val no-arrow-icon">
                        {{getVipSex(personInfo.sex)}}
                    </div>
                </div>
                <div class="base-info-item" @click="$router.push('/delivery_address?type=add')">
                    <div class="base-info-tip">收货地址</div>
                    <div class="base-info-item-val">
                        {{personInfo.addressNumber||0}}个
                    </div>
                    <div class="base-info-item-icon">
                        <i class="mint-cell-allow-right"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { getUserInfo } from '../api'
import utils from '@utils'
export default {
    name: 'vipInfo',
    mixins: [ utils.MixinBase ],
    data() {
        return {
            personInfo: {}
        }
    },
    mounted() {
        this.wechatInit().then(()=> {
            this.wechatConfigInit().then(() => {
                var shareOptions = {
                    shareTitle: "坚冰商务",
                    shareDesc: "亲！还在等什么，快来看看！",
                    shareUrl: utils.createAuthLink("index.html"),
                    sharePic: ''
                }

                utils.shareHandler({
                    type: 'timeLine',
                    ...shareOptions
                })

                utils.shareHandler({
                    type: 'appMessage',
                    ...shareOptions
                })
            });
            this.init();
        }, ()=> {
            this.init();
        });
    },
    methods: {
        init() {
            getUserInfo().then((data) => {
                this.personInfo = data;
            })
        },
        getVipSex(sex) {
            if(sex == "M") {
                return "男";
            } else if(sex == "F") {
                return "女";
            } else {
                return "";
            }
        }
    }
}
</script>